<#include "common/main.html">
<#macro bodyId>common-edit</#macro>
<#macro content>

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main ty-common-page">
    <h1 class="page-header">横幅广告详情
        <div class="btns">
            <a class="btn btn-primary" href="/banner/list">返回横幅广告列表</a>
        </div>
    </h1>

    <form class="form-horizontal ac-form" role="form">

        <div class="form-group">

            <input type="hidden" class="form-control ac-form-item" name="id" value="${banner.id}" readonly required/>
            
            <label class="col-sm-2 control-label required">广告顺序：</label>
            <div class="col-sm-3">
                <input class="form-control ac-form-item" name="bannerOrder" value="${banner.bannerOrder}" required/>
            </div>
            
            <label class="col-sm-2 control-label required">广告状态：</label>
            <div class="col-sm-3">
               <select class="form-control ac-form-item" name="bannerStatus" required>
                   <option value="1" <#if banner.bannerStatus=='1'>selected="true"</#if>>启用</option>
                   <option value="0" <#if banner.bannerStatus=='0'>selected="true"</#if>>禁用</option>
               </select>
            </div>

        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label required">广告标题：</label>
            <div class="col-sm-3">
                <input class="form-control ac-form-item" name="title" value="${banner.title}" required/>
            </div>
        </div>
        
        <div class="form-group">
            <label class="col-sm-2 control-label">广告详情按钮文字：</label>
            <div class="col-sm-3">
                <input class="form-control ac-form-item" name="buttonText" value="${banner.buttonText}" />
            </div>
            
            <label class="col-sm-2 control-label">广告详情按钮链接：</label>
            <div class="col-sm-3">
                <input class="form-control ac-form-item" name="buttonUrl" value="${banner.buttonUrl}" />
            </div>
        </div>
        
        <div class="form-group">
            <label class="col-sm-2 control-label ">推荐按钮文字：</label>
            <div class="col-sm-3">
                <input class="form-control ac-form-item" name="recommendText" value="${banner.recommendText}" placeholder="用英文逗号分隔"/>
            </div>
            
            <label class="col-sm-2 control-label required">是否推荐：</label>
            <div class="col-sm-3">
               <select class="form-control ac-form-item" name="recommendStatus" required>
                   <option value="1" <#if banner.recommendStatus=='1'>selected="true"</#if>>是</option>
                   <option value="0" <#if banner.recommendStatus=='0'>selected="true"</#if>>否</option>
               </select>
            </div>
        </div>
        
<!--         <div class="form-group"> -->
<!--             <label class="col-sm-2 control-label">备注：</label> -->
<!--             <div class="col-sm-8"> -->
<!--                 <textarea class="form-control ac-form-item" placeholder="" rows="6" name="remark">${banner.remark}</textarea> -->
<!--             </div> -->
<!--         </div> -->

		<div class="form-group">
			<label class="col-sm-2 control-label required">广告图片：</label>
			<div class="col-sm-6">
				<input class="form-control ac-form-item" name="bannerUrl" value="${banner.bannerUrl}" id="input-id1" required>
			</div>
			<div class="col-sm-2">
				<button id="btn-id1" class="btn btn-default" type="button">请上传图片</button> 
			</div>
			<div class="col-sm-4 col-sm-offset-2" style="margin-top: 15px;">
				<image class="upload-img" <#if banner.bannerUrl != null && banner.bannerUrl != ''>src="${banner.bannerUrl}"</#if> id="upload-img1"  width="180"  />
			</div>
			<div class="col-sm-4" style="margin-top: 15px;">
				<ul class="pic-list">
					<li>
						<div class="progress">
							<div class="progress-bar" style="width: 0%;" id="progress-bar1">0%</div>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-2 control-label required">广告详情图片：</label>
			<div class="col-sm-6">
				<input class="form-control ac-form-item" name="bannerDetailUrl" value="${banner.bannerDetailUrl}" id="input-id2" required>
			</div>
			<div class="col-sm-2">
				<button id="btn-id2" class="btn btn-default" type="button">请上传图片</button> 
			</div>
			<div class="col-sm-4 col-sm-offset-2" style="margin-top: 15px;">
				<image class="upload-img" <#if banner.bannerDetailUrl != null && banner.bannerDetailUrl != ''>src="${banner.bannerDetailUrl}"</#if> id="upload-img2"  width="180"  />
			</div>
			<div class="col-sm-4" style="margin-top: 15px;">
				<ul class="pic-list">
					<li>
						<div class="progress">
							<div class="progress-bar" style="width: 0%;" id="progress-bar2">0%</div>
						</div>
					</li>
				</ul>
			</div>
		</div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-8">
                <button type="submit" class="btn btn-success ">保存</button>
            </div>
        </div>
    </form>

</div>

<script>
    var config = {
    	    swf: '${rc.contextPath}/static/lib/uploadify/uploadify.swf',
    	    save: '/banner/createOrUpdate',
    	    uploadApi:'${rc.contextPath}/image/upload',
    	    successRedirectApi:'${rc.contextPath}/banner/list'
    }
</script>

</#macro>


<script>

// 在服务器 使用 name="file" 来接受文件
crearteUploader("input-id1", 'btn-id1', 'upload-img1', 'progress-bar1');
crearteUploader("input-id2", 'btn-id2', 'upload-img2', 'progress-bar2');

// inputId: 关联input的id; btnId; imgClass; progressClass
function crearteUploader(inputId, btnId, imgClass, progressClass) {
	
	var uploadOpt = {
		runtimes : 'html5,flash,silverlight,html4',
		browse_button : btnId, // you can pass an id...
		//container: document.getElementById('container'), // ... or DOM Element itself
		url : '/image/upload',
		auto: true,
		flash_swf_url : '/static/lib/plupload/js/Moxie.swf',
		silverlight_xap_url : '/static/lib/plupload/js/Moxie.xap',
		
		filters : {
			max_file_size : '10mb',
			mime_types: [
				{title : "Image files", extensions : "jpg,gif,png,jpeg"},
				{title : "Zip files", extensions : "zip"}
			]
		},

		init: {
			PostInit: function() {
			},

			FilesAdded: function(up, files) {
				plupload.each(files, function(file) {
					var img = $('#' + imgClass)[0];
					
					if(URL && URL.createObjectURL){
						img.src = URL.createObjectURL(file.getNative());
					}else if(FileReader) {
						var fileRead = new FileReader();

						fileRead.onload = function() {
							img.src = fileRead.result;
						};

						fileRead.readAsDataURL(file.getNative());
					}
				});
				up.start();
			},

			UploadProgress: function(up, file) {
				var per = file.percent + "%";
				var perEle = $("#" + progressClass)[0];
				perEle.innerHTML = per;
				perEle.style.width = per;
			},

	        FileUploaded: function(up, file, info) {
				// Called when file has finished uploading
				// 检查
				var d = JSON.parse(info.response);
				if(d.code == 200) {
					// 成功
					$("#" + inputId)[0].value = d.data.fileUrl;
				} else {
					// 失败
				}
				
	        },


			Error: function(up, err) {
				//document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
			}
		}
	};
	
	var uploader = new plupload.Uploader(uploadOpt);

	uploader.init();
	
}

</script>